<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
  <script type="text/javascript" src="../../../static/jquery/js/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="../../../static/jquery/js/jquery-ui-1.8.23.custom.min.js"></script>
<link rel="stylesheet" type="text/css" href="../../../static/jquery/css/ui-lightness/jquery-ui-1.8.23.custom.css">
  <style type="text/css">
  
  	#login{
  		font-size: 16px;
  		margin: 0px;
  		padding: 0px;
  	}
  	#login ul li{
  		 list-style:  none;
  		 height: 50px;
  		 width: 500px;
  		 margin: 0px auto;
  	}
  	#login .errmsg{
  		color: red;
  	}
  	#login .label {
  		display:inline-block;
		width:100px;
		margin-right: 5px;
	}

	#login input{
		display:inline-block;
		width:200px;
		height: 20px; 
		margin-right: 5px;
	}
	#login  .star {
		display:inline-block;
  		font-weight: bold;
  		color: red;
	}
	
  </style>
  <script>
  $(document).ready(function() {
    $("#login").dialog({buttons: { "登录": function() {_login(); },"取消":function(){ $(this).dialog("close");} },
    	autoOpen: false ,hide:{ effect: 'drop', direction: "up" },modal:true,width:550,height:300,
    	draggable:false,resizable:false});
    $("#login .email").blur(function(){
    	_login_check_email($(this).val());
    });
    $("#login .password").blur(function(){
    	_login_check_password($(this).val());
    });
    $("#open").button();
    $("#open").click(function(){
    	$("#login  .star").html("*");
    	$("#login").dialog("open");
    });
  });
  
  
	function _login_check_email(str) {
		flag=true;
		if (str==undefined||str==null||str == ""){
			$("#login .img_email").html( "<img src=\"../../../static/img/check_error.png\" align=\"middle\">邮箱不能为空");
			flag=false;
		}else if(str.length<1){
			$("#login .img_email").html( "<img src=\"../../../static/img/check_error.png\" align=\"middle\">邮箱格式有误");
			flag=false;
		}else{
			$("#login .img_email").html( "<img src=\"../../../static/img/check_success.png\" align=\"middle\">");
		}
		
		return flag;
	}
	function _login_check_password(str) {
		flag=true;
		if (str==undefined||str==null||str == ""){
			$("#login .img_password").html( "<img src=\"../../../static/img/check_error.png\" align=\"middle\">密码不能为空");
			flag=false;
		}else if(str.length<1){
			$("#login .img_password").html( "<img src=\"../../../static/img/check_error.png\" align=\"middle\">密码最少为3个字符");
			flag=false;
		}else{
			$("#login .img_password").html( "<img src=\"../../../static/img/check_success.png\" align=\"middle\">");
		}
		
		return flag;
	}
	
	function _login_checkAll() {
		var flag=_login_check_email($("#login .email").val());
		if(flag)
			flag=_login_check_password($("#login .password").val());
		return flag;
	}
	function _login(){
		var flag=_login_checkAll();
		if(flag)
			$("#login_form").submit();	
	}
  </script>
  
</head>
<body style="font-size:62.5%;">
  
<div id="login" title="用户登录">
	<form action="/user/login.do" method="post" id="login_form">
			<ul>
				<li class="errmsg"></li>
				<li>
					<span class="label">邮箱:</span>
					<span class="input"><input type="text" name="email" class="email"></span>
					<span class="star img_email">*</span></li>
				<li>
					<span class="label">密码:</span>
					<span class="input"><input type="password" name="password" class="password"></span>
					<span class="star img_password">*</span></li>

			</ul>
     </form>
</div>
<button id="open">open</button>
</body>
</html>

